
<template>
  <view style="display: flex; align-items: center;">
    <tn-input
        input-align="center"
        :value="startValue"
        @input="$emit('update:startValue', $event)"
        @change="handleChange($event, 'start')"
    />
    +
    <tn-input
        input-align="center"
        type="number"
        :value="endValue"
        @input="$emit('update:endValue', $event)"
        @change="handleChange($event, 'end')"
    />
  </view>
</template>

<script>
export default {
  model: {
    prop: ['startValue', 'endValue'],
    event: 'update:startValue update:endValue'
  },
  props: {
    startValue: {
      type: [String],
      default: 'K'
    },
    endValue: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    handleChange(e, field) {
      console.log(`Input ${field} changed:`, e);
      this.$emit(`update:${field}Value`, e);
    }
  }
};
</script>


<!--<template>-->
<!--  <view style="display: flex">-->
<!--    K-->
<!--    <tn-input input-align="center" type="number" v-model="value" @change="change"/>-->
<!--    {{ value }}-->
<!--    +-->
<!--    <tn-input input-align="center" type="number" v-model="end" @change="endChange"/>-->
<!--  </view>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  props: {-->
<!--    value: {-->
<!--      type: String | Number,-->
<!--      default: ''-->
<!--    },-->
<!--    end: {-->
<!--      type: String | Number,-->
<!--      default: ''-->
<!--    },-->
<!--  },-->
<!--  data() {-->
<!--    return {};-->
<!--  },-->
<!--  methods: {-->
<!--    change(e) {-->
<!--      console.log('e', e)-->
<!--    },-->
<!--    endChange(e) {-->
<!--      console.log('e', e)-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
